<script>
import citySelect from "../components/citySelect.vue"
import ISendAddressBody from "@/interface/ISendAddressBody"
import {
	SendAddress
} from "@/api/publish"
import city from '@/components/city.vue'

export default {
	components: {
		citySelect,
		city
	},
	props: ["title", "content", "address", "area_id"],
	data() {
		return {
			formData: {
				user_id: uni.getStorageSync('user_id'),
				area_id: "", //城市
				content: "", //详细地址
			},
			fullAddress: ""
		}
	},
	created() {
		if (this.area_id) {
			this.formData.area_id = this.area_id
		}
		if (this.address) {
			this.fullAddress = this.address
		}
		if (this.content) {
			this.formData.content = this.content
		}
	},
	onLoad() {

	},
	methods: {
		back() {
			// uni.navigateBack()
			this.cback()
		},
		log(o) {
			console.log(o);
		},
		async submit() {
			if (!this.formData.area_id) return this.toast(this.$t('请选择城市'));
		
			uni.showLoading({
				title: '提交中'
			});
			const res = await SendAddress(this.formData);
			uni.hideLoading();
			this.$emit("addressSelectConfirm", res.data.data.data);
		}

	}
}
</script>
<template>
	<view>
		<!-- <div style="height:50rpx"></div>
					<div class="header">
						<div class="back center" @click="back">
							<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
						</div>
						{{$t('地址填写')}}
					</div> -->
		<view class="p-30 relative">

			<div class="w-25" style="right:5%;top:30rpx;position:absolute" @click="$emit('update:show', false)">
				<image src="/static/icon/close.png" mode="widthFix" class="w-full">
				</image>
			</div>
			<div class="fz30 center font-bold mb-30 pb-30" style="border-bottom: 1rpx solid #f5f5f5;">{{ title || $t('地址选择')
				}}
			</div>
			<div class="section bg-white p-20 rounded-26">
				<div class="between items-start">
					<div class="fz28 text-555 flex-shrink-0 mr-50 ">{{$t('选择城市')}}</div>
					<div class="flex">

						<city :value="formData.area_id" @change="e => {
							formData.area_id = e.column3.value;
							fullAddress = e.column1.value == -1 ? '不限' : (e.column1.label + '-' + e.column2.label + '-' + e.column3.label);
						}">
							{{ fullAddress || $t('请选择城市') }}
						</city>
						<!-- <citySelect :text="fullAddress" @confirm="e => {
							formData.area_id = e.column3.value;
							fullAddress = e.column1.label + '-' + e.column2.label + '-' + e.column3.label;
						}" /> -->
						<image src="/static/icon/right-2.png" mode="widthFix" class="w-10 ml-10"></image>
					</div>
				</div>

				<div class="between mt-40">
					<div class="fz28 text-555">{{$t('详细地址')}}</div>
				</div>
				<textarea v-model="formData.content" :placeholder="$t('请输入详细地址')"
					class="bg-gray-300 w-full rounded-16 mt-20 p-20"></textarea>
			</div>


			<div class="p-30 bg-white">
				<div class="submit center h-100 bg-primary text-white fz32 rounded-50" @click="submit">
					{{$t('确认')}}
				</div>
			</div>


		</view>
	</view>
</template>



<style lang="less">
.items-start {
	align-items: flex-start;
}

.flex-shrink-0 {
	flex-shrink: 0;
}

page {
	background-color: #F6F7FB;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}
</style>